<template>
  <view class="productSort">
	<u-navbar :bgColor="'#ffffff'" :titleStyle="{color: '#ffffff', fontSize: '14px'}" placeholder>
		<view class="u-nav-slot" slot="left">
			<u-search placeholder="日照香炉生紫烟" v-model="keyword" :showAction='false' ></u-search>
		</view>
	</u-navbar>
	 
	 <view class="flex">
	 	<image src="https://qny.yijiumy.com/1855/star.png" style="width: 30rpx;height: 29rpx;" mode=""></image>
		 <text style="font-weight: bold;font-size: 30rpx;color: #333333;margin: 0 21rpx 0 10rpx;" >1855旗舰店</text>  
		 <u-icon name="arrow-right" size="15" ></u-icon>
	 </view>
	 <view class="flex">
	 	<u-icon name="map" ></u-icon> <text style="font-weight: 500;font-size: 24rpx;color: #8F9599;margin-left: 13rpx;">直线距离1.2km</text> 
	 </view>
	 <view class="flex">
	 	<u-notice-bar :text="text1" bgColor='transparent' color="#9F2B45" mode='link'></u-notice-bar>
	 </view>
    <div class="index">
      <view class="header acea-row row-center-wrapper">
        <view @click="goGoodSearch()" class="search acea-row row-middle">
          <text class="iconfont icon-xiazai5"></text>搜索商品
        </view>
      </view>
    </div>
	

	
	
    <view class="aside">
      <view
        class="item acea-row row-center-wrapper"
        :class="categoryDivindex === navActive ? 'on' : ''"
        v-for="(item, categoryDivindex) in category"
        :key="categoryDivindex"
        @click="asideTap(categoryDivindex)"
      >
        <text>{{ item.cateName }}</text>
      </view>
    </view>
    <view class="conter">
      <view v-for="(item, eq) in category" :key="eq">
        <view class="listw" v-if="eq === navActive">
          <view class="title acea-row row-center-wrapper" ref="title">
            <view class="line"></view>
            <view class="name">{{ item.cateName }}</view>
            <view class="line"></view>
          </view>
          <view class="list acea-row">
            <view
              class="item acea-row row-column row-middle"
              v-for="(child, categoryIndex) in item.children"
              :key="categoryIndex"
              @click="goGoodsList(child)"
            >
              <view class="picture">
                <image :src="child.pic" />
              </view>
              <view class="name line1">{{ child.cateName }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <view style="height:160rpx;"></view> -->
  </view>
</template>
<script>
import { getCategory } from "@/api/store";
import { trim } from "@/utils";

export default {
  name: "GoodsClass",
  components: {},
  props: {},
  data: function() {
    return {
		text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
		keyword:'',
      category: [],
      navActive: 0,
      search: "",
      lock: false
    };
  },
  // watch: {
  //   "$yroute.query.id": function(n) {
  //     if (n) {
  //       this.activeCateId(n);
  //     }
  //   }
  // },
  mounted() {
    // document.addEventListener("scroll", this.onScroll, false);
    this.loadCategoryData();
  },
  methods: {
    goGoodSearch() {
	  this.$yrouter.push({
	  	path: "/pages/shop/GoodSearch/index",
	  	query: {
	  		type: "good"
	  	}
	  });
    },
    goGoodsList(child) {
      this.$yrouter.push({
        path: "/pages/shop/GoodsList/index",
        query: { id: child.id, title: child.cateName }
      });
    },
    activeCateId(n) {
      let index = 0;
      n = parseInt(n);
      if (!n) return;
      this.category.forEach((cate, i) => {
        if (cate.id === n) index = i;
      });

      if (index !== this.navActive) {
        this.asideTap(index);
      }
    },
    loadCategoryData() {
      getCategory().then(res => {
        this.category = res.data;
        // this.$nextTick(() => {
        //   if (this.$yroute.query.id) {
        //     this.activeCateId(this.$yroute.query.id);
        //   }
        // });
      });
    },
    submitForm: function() {
      var val = trim(this.search);
      if (val) {
        this.$yrouter.push({
          path: "/pages/shop/GoodsList/index",
          query: { s: val }
        });
        setTimeout(() => (this.search = ""), 500);
      }
    },
    asideTap(index) {
      this.navActive = index;
    }
  },
  beforeDestroy: function() {
    // document.removeEventListener("scroll", this.onScroll, false);
  }
};
</script>

<style scoped lang="less">
	.flex{
		display: flex;
		align-items: center;
		margin:30rpx 0 0 33rpx;
	}
	/deep/.u-notice-bar{
		padding: 0 !important;
	}
.productSort {
  height: 100%;
}
</style>
